<template>
  <div class="layout-chat">
    <ElDrawer
      v-model="isDrawerVisible"
      :size="isMobile ? '100%' : '480px'"
      :with-header="false"
    >
      <div class="header">
        <div class="header-left">
          <span class="name">Art Bot</span>
          <div class="status">
            <div
              class="dot"
              :class="{ online: isOnline, offline: !isOnline }"
            ></div>
            <span class="status-text">{{ isOnline ? "在线" : "离线" }}</span>
          </div>
        </div>
        <div class="header-right">
          <ElIcon class="icon-close" :size="20" @click="closeChat">
            <Close />
          </ElIcon>
        </div>
      </div>
      <div class="chat-container">
        <!-- 聊天消息区域 -->
        <div class="chat-messages" ref="messageContainer">
          <template v-for="(message, index) in messages" :key="index">
            <div
              :class="[
                'message-item',
                message.isMe ? 'message-right' : 'message-left',
              ]"
            >
              <ElAvatar
                :size="32"
                :src="message.avatar"
                class="message-avatar"
              />
              <div class="message-content">
                <div class="message-info">
                  <span class="sender-name">{{ message.sender }}</span>
                  <span class="message-time">{{ message.time }}</span>
                </div>
                <div class="message-text">{{ message.content }}</div>
              </div>
            </div>
          </template>
        </div>

        <!-- 聊天输入区域 -->
        <div class="chat-input">
          <ElInput
            v-model="messageText"
            type="textarea"
            :rows="3"
            placeholder="输入消息"
            resize="none"
            @keyup.enter.prevent="sendMessage"
          >
            <template #append>
              <div class="input-actions">
                <ElButton :icon="Paperclip" circle plain />
                <ElButton :icon="Picture" circle plain />
                <ElButton type="primary" @click="sendMessage" v-ripple
                  >发送</ElButton
                >
              </div>
            </template>
          </ElInput>
          <div class="chat-input-actions">
            <div class="left">
              <i class="iconfont-sys">&#xe634;</i>
              <i class="iconfont-sys">&#xe809;</i>
            </div>
            <ElButton type="primary" @click="sendMessage" v-ripple
              >发送</ElButton
            >
          </div>
        </div>
      </div>
    </ElDrawer>
  </div>
</template>

<script setup lang="ts">
import { Picture, Paperclip } from "@element-plus/icons-vue";
import { mittBus } from "@/utils/sys";
import meAvatar from "@/assets/img/avatar/avatar5.webp";
import aiAvatar from "@/assets/img/avatar/avatar10.webp";

defineOptions({ name: "ArtChatWindow" });

// 类型定义
interface ChatMessage {
  id: number;
  sender: string;
  content: string;
  time: string;
  isMe: boolean;
  avatar: string;
}

// 常量定义
const MOBILE_BREAKPOINT = 500;
const SCROLL_DELAY = 100;
const BOT_NAME = "Art Bot";
const USER_NAME = "Ricky";

// 响应式布局
const { width } = useWindowSize();
const isMobile = computed(() => width.value < MOBILE_BREAKPOINT);

// 组件状态
const isDrawerVisible = ref(false);
const isOnline = ref(true);

// 消息相关状态
const messageText = ref("");
const messageId = ref(10);
const messageContainer = ref<HTMLElement | null>(null);

// 初始化聊天消息数据
const initializeMessages = (): ChatMessage[] => [
  {
    id: 1,
    sender: BOT_NAME,
    content: "你好！我是你的AI助手，有什么我可以帮你的吗？",
    time: "10:00",
    isMe: false,
    avatar: aiAvatar,
  },
  {
    id: 2,
    sender: USER_NAME,
    content: "我想了解一下系统的使用方法。",
    time: "10:01",
    isMe: true,
    avatar: meAvatar,
  },
  {
    id: 3,
    sender: BOT_NAME,
    content:
      "好的，我来为您介绍系统的主要功能。首先，您可以通过左侧菜单访问不同的功能模块...",
    time: "10:02",
    isMe: false,
    avatar: aiAvatar,
  },
  {
    id: 4,
    sender: USER_NAME,
    content: "听起来很不错，能具体讲讲数据分析部分吗？",
    time: "10:05",
    isMe: true,
    avatar: meAvatar,
  },
  {
    id: 5,
    sender: BOT_NAME,
    content:
      "当然可以。数据分析模块可以帮助您实时监控关键指标，并生成详细的报表...",
    time: "10:06",
    isMe: false,
    avatar: aiAvatar,
  },
  {
    id: 6,
    sender: USER_NAME,
    content: "太好了，那我如何开始使用呢？",
    time: "10:08",
    isMe: true,
    avatar: meAvatar,
  },
  {
    id: 7,
    sender: BOT_NAME,
    content:
      "您可以先创建一个项目，然后在项目中添加相关的数据源，系统会自动进行分析。",
    time: "10:09",
    isMe: false,
    avatar: aiAvatar,
  },
  {
    id: 8,
    sender: USER_NAME,
    content: "明白了，谢谢你的帮助！",
    time: "10:10",
    isMe: true,
    avatar: meAvatar,
  },
  {
    id: 9,
    sender: BOT_NAME,
    content: "不客气，有任何问题随时联系我。",
    time: "10:11",
    isMe: false,
    avatar: aiAvatar,
  },
];

const messages = ref<ChatMessage[]>(initializeMessages());

// 工具函数
const formatCurrentTime = (): string => {
  return new Date().toLocaleTimeString([], {
    hour: "2-digit",
    minute: "2-digit",
  });
};

const scrollToBottom = (): void => {
  nextTick(() => {
    setTimeout(() => {
      if (messageContainer.value) {
        messageContainer.value.scrollTop = messageContainer.value.scrollHeight;
      }
    }, SCROLL_DELAY);
  });
};

// 消息处理方法
const sendMessage = (): void => {
  const text = messageText.value.trim();
  if (!text) return;

  const newMessage: ChatMessage = {
    id: messageId.value++,
    sender: USER_NAME,
    content: text,
    time: formatCurrentTime(),
    isMe: true,
    avatar: meAvatar,
  };

  messages.value.push(newMessage);
  messageText.value = "";
  scrollToBottom();
};

// 聊天窗口控制方法
const openChat = (): void => {
  isDrawerVisible.value = true;
  scrollToBottom();
};

const closeChat = (): void => {
  isDrawerVisible.value = false;
};

// 生命周期
onMounted(() => {
  scrollToBottom();
  mittBus.on("openChat", openChat);
});

onUnmounted(() => {
  mittBus.off("openChat", openChat);
});
</script>

<style lang="scss">
.layout-chat {
  .el-overlay {
    background-color: rgb(0 0 0 / 20%) !important;
  }
}
</style>

<style lang="scss" scoped>
@use "./style";
</style>
